<template>
	<view class="page">
		<view class="page-bg"></view>
		<z-paging ref="paging" :refresher-enabled="true" @query="getstatistics" :refresher-only="true"  :use-refresher-status-bar-placeholder="true">
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" left-width="200px">
				<template v-slot:left>
					<view class="flex item-center" style="width: 200px;">
						<image src="@/static/image/login-logo.png" class="home-logo" mode="widthFix"></image>
						<view class="home-logo-name flex item-center"><text class="logo-name">火动通告</text> | <text
								class="logo-status">商户端</text></view>
					</view>
				</template>
			</uni-nav-bar>
			<view class="container">
				<!-- <view class="" @click="linkapply">
					商户入驻
				</view> -->
				<view v-if="!verOrderType">
					<view class="cord-and-scan flex item-center justify-center" @click="openOrderType(1)">
						<image src="@/static/svg/index/icon-scan.svg" class="icon-scan" mode="widthFix"></image>
						扫码核销
					</view>
					<view class="cord-and-scan flex item-center justify-center" @click="openOrderType(2)">
						<image src="@/static/svg/index/icon-cord.svg" class="icon-scan" mode="widthFix"></image>
						手动核销
					</view>
				</view>
				<view v-else-if="verOrderType == 1"  class="camera-box">
					<view class="box">
						<view class="line"></view>
						<image src="@/static/svg/index/icon-scan-bg.svg" class="icon-scan-bg-left-top"></image>
						<image src="@/static/svg/index/icon-scan-bg.svg" class="icon-scan-bg-left-bottom"></image>
						<image src="@/static/svg/index/icon-scan-bg.svg" class="icon-scan-bg-right-top"></image>
						<image src="@/static/svg/index/icon-scan-bg.svg" class="icon-scan-bg-right-bottom"></image>
					</view>
					<camera device-position="back" flash="auto" @scancode="scancode" class="device-camera" mode="scanCode"></camera>
					<view class="orderType flex item-center justify-center">
						<view class="change-btn flex item-center justify-center"  @click="openOrderType(2)">
							<image src="../../static/svg/index/icon-change.svg" class="icon-change" mode="widthFix"></image>
							手动核销
						</view>
					</view>
				</view>
				<view v-else-if="verOrderType == 2" class="cord-order">
					<view class="cord-order-title">手动核销</view>
					<view>
						<input class="order-inp" v-model="id" type="text" placeholder-style="color:rgba(250, 69, 67, 1);" placeholder="请输入核销码">
					</view>
					<view class="order-tip">
						<view v-if="showErr" class="flex item-center">
							<view class="pop-alert">!</view>{{errText}}
						</view>
					</view>
					<view class="order-btn" @click="getByVerifyCodeFn()" :style="{background:id&&id.length?'#FA4543':''}">去核销</view>
					<view class="flex item-center justify-center" >
						<view class="change-btn flex item-center justify-center" @click="openOrderType(1)">
							<image src="../../static/svg/index/icon-change.svg" class="icon-change" mode="widthFix"></image>
							扫码核销
						</view>
					</view>

				</view>
				<view class="mer-total-box">
					<view class="flex item-center justify-between">
						<text class="mer-title">商户数据</text>
						<view class="more-box flex item-center" @tap="linkToCount">
							<text>更多</text>
							<image src="@/static/svg/index/icon-right.svg" class="icon-right" mode="widthFix"></image>
						</view>
					</view>
					<view class="total-box flex ">
						<view class="total-item r-bor b-bor flex flex-col item-center justify-center">
							<view class="total-item-title">今日核销单量</view>
							<view class="total-num">{{getdealThousands(staticTotal.verifyOrderNum||0)}}</view>
						</view>
						<view class="total-item b-bor flex flex-col item-center justify-center">
							<view class="total-item-title">今日核销金额</view>
							<view class="total-num"><text class="total-unit">¥</text>{{getdealThousands(staticTotal.verifyOrderAmt||0)}}</view>
						</view>
						<view class="total-item r-bor flex flex-col item-center justify-center">
							<view class="total-item-title">今日补贴金额</view>
							<view class="total-num"><text class="total-unit">¥</text>{{getdealThousands(staticTotal.verifySubsidyAmt||0)}}</view>
						</view>
						<view class="total-item flex flex-col item-center justify-center">
							<view class="total-item-title">今日总收入</view>
							<view class="total-num"><text class="total-unit">¥</text>{{getdealThousands(staticTotal.totalAmt||0)}}</view>
						</view>
					</view>
				</view>
				<!-- <input type="text" placeholder="邀请码" style="border: 1px solid #eeeeee;height: 40px;background-color: antiquewhite;" v-model="merchantCode">
				<button @click="linkapply">商户入驻</button> -->
			</view>
			<view :style="`height:calc(60px + ${safeAreaBottom}px);`"></view>
		</z-paging>
		<joinOtherMer ref="joinMer"></joinOtherMer>
	</view>
</template>
<script setup name="Index">
	import {
		defineEmits,
		ref,
		onMounted,
		computed
	} from 'vue'
	import { getByVerifyCode, statistics } from '@/api/order.js'
	import { dealThousands } from '@/utils/index.js'
	import joinOtherMer from './components/joinOtherMer.vue'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	const verOrderType = ref(null)
	const id = ref(null)
	const showErr = ref(false)
	const joinMer = ref()
	const merchantCode = ref('')
	const errText = ref('输入核销码无效......')
	const paging = ref()
	const linkapply = () =>  {
		uni.navigateTo({
			// url:`/applyPages/bussinessApply/invitePage?code=${merchantCode.value}`
			// url:'/applyPages/bussinessApply/applyResult/applyResult',
			url:'/applyPages/bussinessApply/selectBussinessType'
		})
	}
	const emit = defineEmits({
		'tabClick': (index) => {
			return index
		}
	})
	const linkToCount = () => {
		emit('tabClick', {index:1})
	}
	const openOrderType = (type) => {
		verOrderType.value = type
	}
	const staticTotal = ref({})
	const getstatistics = async () => {
		let result = await statistics()
		// console.log(result)
		if(result){
			staticTotal.value = result
		}
		paging.value.complete()
	}
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets.bottom
	})
	const getByVerifyCodeFn = async () => {
		if(!id.value){
			return
		}
		uni.showLoading({
			title:"核销中..."
		})
		getByVerifyCode({verifyCode:id.value},{hideErrorToast:true}).then(res =>{
			uni.hideLoading()
			showErr.value = false
			openOrderType(null)
			uni.navigateTo({
				url:`/center/pages/verifyCode/verifyCode?id=${id.value}`,
				events: {
					reFreshPage: (data) => {
						id.value = null
						getstatistics()
						// console.log(333)
						// 返回刷新数据
					}
				},
				success: (res) => {
					res.eventChannel.emit('acceptData',{data:res.data})
				}
			})
			id.value = null
		}).catch(err => {
			uni.hideLoading()
			
			if(verOrderType.value ==1){
				uni.showToast({
					icon: 'none',
					title: err.message
				})
				id.value = null
				openOrderType(null)
			}else{
				showErr.value = true
				errText.value = err.message
			}
		})

	}
	const scancode = async (res) => {
		console.log(res,'res')
		let result = res.detail.result
		if(result && id.value != result){
			id.value = result
			getByVerifyCodeFn()
		}
	}
	const getdealThousands = (num) => {
		return dealThousands(num)
	}
	onMounted(() => {
		getstatistics()
		if(userStore.$state.investCode){
			joinMer.value.showPop(true)
		}
	})
</script>
<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;
		width: 100vw;
	}

	.page-bg {
		z-index: 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-image: radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);
		background-size: 396px 396px;
		background-repeat: no-repeat;
		filter: blur(50px);
	}

	.home-logo {
		width: 32px;
		height: 32px;
		border-radius: 10px;
	}

	.home-logo-name {
		margin-left: 10px;
		font-size: 8px;
		color: rgba(51, 51, 51, 1);

		.logo-name {
			color: #FF1F42;
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			letter-spacing: 0px;
			text-align: center;
			margin-right: 4px;
		}

		.logo-status {
			margin-left: 4px;
		}
	}

	.container {
		position: relative;
		z-index: 1;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
	}

	.cord-and-scan {
		box-shadow: 0px 2px 10px 0px #3900004D;
		margin: 10px 20px;
		padding: 20px;
		height: 165px;
		border-radius: 12px;
		color: #333333;
		font-size: 24px;

		.icon-scan {
			width: 36px;
			margin-right: 10px;
		}
	}

	.mer-total-box {
		margin: 20px;

		.mer-title {
			color: #333333;
			font-size: 16px;
			font-weight: 600;
			line-height: 22px;
			letter-spacing: 0px;
			text-align: center;
		}

		.more-box {
			color: rgba(51, 51, 51, 0.6);
		}

		.icon-right {
			width: 16px;
			// margin-left: 4px;
		}

		.total-box {
			box-shadow: 0px 2px 10px 0px #3900004D;
			border-radius: 12px;
			margin-top: 10px;
			flex-wrap: wrap;

			.total-item {
				width: 50%;
				text-align: center;
				height: 83px;
				box-sizing: border-box;

				&.r-bor {
					border-right: 1px solid rgba(244, 244, 244, 1)
				}

				&.b-bor {
					border-bottom: 1px solid rgba(244, 244, 244, 1)
				}

				.total-item-title {
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
					letter-spacing: 0px;
					text-align: center;
					color: rgba(51, 51, 51, 0.6);
				}

				.total-num {
					font-size: 20px;
					font-weight: 700;
					line-height: 23px;
					letter-spacing: 0px;
					text-align: center;
					margin-top: 10px;
					color: rgba(51, 51, 51, 1);
				}
			}
		}
		.total-unit{
			font-size: 12px;
		}
	}
	// 扫码核销
	.device-camera{
		width: 100%;
		height: 100%;
	}
	// 手动核销
	.cord-order{
		border-radius: 12px;
		box-shadow: 0px 2px 10px 0px #3900004D;
		margin: 10px 20px;
		padding: 20px;
		height: 343px;
		.cord-order-title{
			font-family: PingFang SC;
			font-size: 24px;
			font-weight: 600;
			line-height: 34px;
			letter-spacing: 0px;
			text-align: center;
			margin-top: 10px;
		}
		.order-inp{
			margin: 40px 20px 20px 20px;
			// padding: 20px;
			height: 48px;
			border-radius: 8px;
			background: rgba(255, 238, 238, 1);
			border: 1px solid rgba(250, 69, 67, 1);
			text-align: center;
			color: rgba(250, 69, 67, 1);
			font-size: 16px;
			&::placeholder{
				color: rgba(250, 69, 67, 1);
			}
		}
		.order-btn{
			margin: 0px 20px 40px 20px;
			height: 46px;
			padding: 12px;
			border-radius: 8px;
			background: rgba(250, 69, 67, 0.3);
			color: #ffffff;
			text-align: center;
		}
		.order-tip{
			margin: 0 20px 8px 20px;
			// padding: 12px;
			height: 20px;
			line-height: 20px;
			font-size: 12px;
			color: rgba(250, 69, 67, 1);
		}
	}
	.change-btn{
		width: 104px;
		height: 36px;
		padding: 8px 12px;
		border-radius: 32px;
		background: rgba(51, 51, 51, 0.6);
		color: #ffffff;
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		letter-spacing: 0px;
		.icon-change{
			width: 16px;
			margin-right: 4px;
		}
	}

	.box {
		width: 100%;
		height: 100%;
		position: absolute;
		// left: 50%;
		// top: 50%;
		// transform: translate(-50%, -50%);
		left: 0;
		top: 0;
		overflow: hidden;
		/* border: 0.1rem solid rgba(152, 231, 255, 0.2); */
		z-index: 11;
	}

	.line {
		height: calc(100% - 2px);
		width: 100%;
		background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, rgba(250, 69, 67, 1) 211%);
		border-bottom: 3px solid rgba(250, 69, 67, 1);
		transform: translateY(-100%);
		animation: radar-beam 2s infinite alternate;
		animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
		animation-delay: 1.4s;
	}

	// .box:after,
	// .box:before,
	// .angle:after,
	// .angle:before {
	// 	content: '';
	// 	display: block;
	// 	position: absolute;
	// 	width: 20px;
	// 	height: 20px;
	// 	z-index: 12;
	// 	border: 10px solid transparent;
	// }

	// .box:after,
	// .box:before {
	// 	top: 0;
	// 	border-top-color: rgba(250, 69, 67, 1);
	// }

	.angle:after,
	.angle:before {
		bottom: 0;
		border-bottom-color: rgba(250, 69, 67, 1);
	}

	// .box:before,
	// .angle:before {
	// 	left: 0;
	// 	border-left-color: rgba(250, 69, 67, 1);
	// }

	// .box:after,
	// .angle:after {
	// 	right: 0;
	// 	border-right-color: rgba(250, 69, 67, 1);
	// }

	@keyframes radar-beam {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(0);
		}
	}
	.icon-scan-bg-left-top{
		position: absolute;
		z-index: 12;
		left: 0;
		top: 0px;
		width: 32px;
		height: 32px;
		transform: rotate(180deg);
	}
	.icon-scan-bg-right-top{
		position: absolute;
		z-index: 12;
		right: 0;
		top: 0px;
		width: 32px;
		height: 32px;
		transform: rotate(270deg);
	}
	.icon-scan-bg-left-bottom{
		position: absolute;
		z-index: 12;
		left: 0;
		bottom: 0;
		width: 32px;
		height: 32px;
		transform: rotate(90deg);
	}
	.icon-scan-bg-right-bottom{
		position: absolute;
		z-index: 12;
		right: 0;
		bottom: 0;
		width: 32px;
		height: 32px;
	}
	.orderType{
		position: absolute;
		bottom: 20px;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 99;
	}
	.camera-box{
		margin: 10px auto;
		height: 343px;
		width: calc(100% - 40px);
		box-shadow: 0px 2px 10px 0px #3900004D;
		position: relative;
	}
	.pop-alert {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: rgba(250, 69, 67, 1);
		text-align: center;
		font-size: 12px;
		color: #ffffff;
		line-height: 16px;
		margin-right: 4px;
		// margin: 20px 0 10px 0;
	}
</style>
